<project-header class="top-header"></project-header>
  <project-page>

  <!-- Middle section -->
  <div class="middle-section">
    <div id="scrollable-content" class="middle-container has-scroll">
      <div class="middle-header">
        <div class="container-fluid">
          <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
          <alerts alerts="alerts"></alerts>
          <div ng-if="!loaded">Loading...</div>
          <div ng-if="imageStream">
            <h1>
              {{imageStream.metadata.name}}:{{tagName}}
            </h1>
          </div>
        </div>
      </div><!-- /middle-header-->
      <div class="middle-content gutter-top">
        <div class="container-fluid">
          <div class="row" ng-if="image">
            <div class="col-md-12">
              <registry-image-pull settings="settings" names="[ imageStream.metadata.name + ':' + tagName ]">
              </registry-image-pull>
              <uib-tabset>
                <uib-tab heading="Details" active="selectedTab.body">
                  <uib-tab-heading>Details</uib-tab-heading>
                  <registry-image-body image="image">
                  </registry-image-body>
                  <registry-image-meta image="image">
                  </registry-image-meta>
                </uib-tab>
                <uib-tab heading="Config" active="selectedTab.config">
                  <uib-tab-heading>Config</uib-tab-heading>
                  <registry-image-config image="image">
                  </registry-image-config>
                </uib-tab>
                <uib-tab heading="Layers" active="selectedTab.meta">
                  <uib-tab-heading>Layers</uib-tab-heading>
                  <registry-image-layers image="image">
                  </registry-image-layers>
                </uib-tab>
              </uib-tabset>
            </div><!-- /col-* -->
          </div>
        </div>
      </div><!-- /middle-content -->
    </div><!-- /middle-container -->
  </div><!-- /middle-section -->
  </project-page>
